<!-- 模板 -->
<template>
  <div class="table">
      <div class="box">
          <div class="btn">
              <div>
                <el-form  :inline="true"  :model="params" size="small"  label-width="52px" >
                    <el-form-item label="名称:">
                        <el-input  v-model="params.name" placeholder="输入表名"  clearable  @clear="search"/> 
                    </el-form-item>
                    <span style="margin-left:10px">
                        <el-button type="primary" icon="el-icon-search" size="small" @click="search">搜索</el-button>
                        <el-button type="primary" icon="el-icon-plus" size="small" @click="add" >添加</el-button>
                    </span>
                </el-form>
              </div>
          </div>
        <el-card>
            <el-table :data="tableData" border style="width: 100%" >
            <el-table-column type="index" label="序号" align="center" width="80"> </el-table-column>
            <el-table-column prop="name" label="名称" align="center" width="280"> 
                <template slot-scope="scope">
                    <el-link   @click="chakan(scope.row)">{{scope.row.name}}</el-link>
                </template>
            </el-table-column>
            <el-table-column  label="标签" align="center" width="280"> 
                <template slot-scope="scope">
                  <div v-if="scope.row.label == ''">——</div>
                <el-tag
                v-else
                v-for="item in scope.row.label.split(',')"
                :key="item"
                type="primary"
                effect="plain"
                >
                {{ item }}
                </el-tag>
            </template>
            </el-table-column>
            <el-table-column prop="categoryName" label="分类" align="center" width="180"> </el-table-column>
            <el-table-column prop="logo" label="大图" align="center" width="180">
                <template slot-scope="scope">
                    <el-image  style="width: 80px;" :src="scope.row.logo"  :preview-src-list="[scope.row.logo]"> </el-image>
                </template>
            </el-table-column>
            <el-table-column prop="numberPeople" label="测试人数" align="center" width="120"> </el-table-column>
            <el-table-column prop="subjectNumber" label="题目个数" align="center" width="120"> </el-table-column>
            <el-table-column prop="actualPrice" label="实际价格" align="center" width="120"> </el-table-column>
            <el-table-column prop="referencePrice" label="参考价格" align="center" width="120"> </el-table-column>
            <el-table-column prop="content" label="介绍" align="center" :show-overflow-tooltip="true" width="320"> </el-table-column>
            <el-table-column  label="操作" align="center" fixed="right" width="300">
                <template slot-scope="scope">
                    <el-button @click="handleUpdateClick(scope.row)" type="primary" icon="el-icon-edit" size="small" plain>修 改</el-button>
                    <el-button @click="handleUnOrUp(scope.row, 1)" type="primary" plain v-if="scope.row.state == 0"> 上 架 </el-button>
                    <el-button @click="handleUnOrUp(scope.row, 0)" type="primary" plain v-if="scope.row.state == 1" > 下 架 </el-button>
                    <el-button @click="handleDeleteClick(scope.row)" type="danger" size="small" icon="el-icon-delete" >删 除</el-button>
                </template>
            </el-table-column>
        </el-table>
        </el-card>
        <pagination
        v-show="newsTotal > 0"
        :total="newsTotal"
        :page.sync="params.pageNum"
        :limit.sync="params.pageSize"
        @pagination="getTableList"
      />
      </div>

      <!-- 添加弹窗 -->
<el-dialog
  :title="title"
  :visible.sync="dialogVisible"
  width="55%"
  :before-close="handleClose">
<el-form :label-position="labelPosition" label-width="130px" :model="form" :rules="rules" ref="form">
    <el-row>
        <el-col :span="12">
            <el-form-item label="大图" prop="logo">
                <el-upload
                :headers='headers'
                class="avatar-uploader"
                :action="upImage+'/table/upload'"
                :on-success="handleAvatarSuccess"
                :show-file-list="false"
                >
                <img v-if="form.logo" :src="form.logo" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="分类图" prop="picUrl">
                      <el-upload
                :headers='headers'
                class="avatar-uploader"
                :action="upImage+'/table/upload'"
                :on-success="handleAvatarSuccess1"
                :show-file-list="false"
                >
                <img v-if="form.picUrl" :src="form.picUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
        </el-col>
    </el-row>

        <!-- <el-form-item label="表名" prop="name">
            <el-input v-model="form.name" style="width: 300px;"></el-input>
        </el-form-item> -->
    <el-row>
        <el-col :span="12">
           <el-form-item label="表名" prop="name">
              <el-input v-model="form.name" style="width: 300px;"></el-input>
          </el-form-item>
          
        </el-col>
        <el-col :span="12">
             <el-form-item label="分类" prop="categoryId">
                <el-select v-model="form.categoryId" placeholder="请选择所属分类" style="width: 300px;">
                    <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                    </el-option>
                </el-select> 
            </el-form-item>
          </el-col>
    </el-row>
    <el-row>
        <el-col :span="12">
           <el-form-item label="实际价格" prop="actualPrice">
                <el-input v-model="form.actualPrice" style="width: 300px;"></el-input>
            </el-form-item>
            
        </el-col>
        <el-col :span="12">
          <el-form-item label="参考价格" prop="referencePrice">
                <el-input v-model="form.referencePrice" style="width: 300px;"></el-input>
            </el-form-item>
            
        </el-col>
    </el-row>

    <el-row>
        <el-col :span="12">
            <el-form-item label="是否推荐" prop="recommended">
                <!-- <el-input v-model="form.recommended" style="width: 300px;"></el-input> -->
              <template>
                <el-radio v-model="form.recommended" :label="0">不推荐</el-radio>
                <el-radio v-model="form.recommended" :label="1">推荐</el-radio>
              </template>
            </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="排序值" prop="sort">
                <el-input v-model.number="form.sort" style="width: 300px;"></el-input>
            </el-form-item>
        </el-col>
    </el-row>

    <el-row>
        <el-col :span="12">
          <el-form-item label="考试时长(分钟)" prop="examTime">
                <el-input v-model.number="form.examTime" style="width: 300px;"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="介绍" prop="content">
            <el-input v-model="form.content" style="width: 300px;" type="textarea"></el-input>
        </el-form-item>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="12">
            <el-form-item label="测试说明">
                <el-input v-model="form.illustrate" style="width: 300px;" type="textarea"></el-input>
            </el-form-item>
        </el-col>
        <el-col :span="12">
            <!-- <el-form-item label="异常建议" v-if="typeShow">
                <el-input v-model="form.abnormalProposal"  style="width: 300px;" type="textarea"></el-input>
            </el-form-item> -->
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="12">
          <el-form-item label="分数是否为区间段" >
            <el-select v-model="form.type"  placeholder="请选择" clearable filterable style="width: 300px;" @change="changeType">
                <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                >
                </el-option>
            </el-select>
      </el-form-item>
        </el-col>
    <el-col :span="12">
      <el-form-item label="正常分数"  v-if="typeShow">
          <el-input v-model.number="form.normalScore" style="width: 300px;"></el-input>
      </el-form-item>
      <el-form-item label="关注量"  v-else>
          <el-input v-model.number="form.followCount" style="width: 300px;"></el-input>
      </el-form-item>
    </el-col>
  </el-row>
      <el-form-item label="关注量"  v-if="typeShow">
          <el-input v-model.number="form.followCount" style="width: 300px;"></el-input>
      </el-form-item>
         <el-form-item label="标签">
              <el-tag
              :key="tag"
              v-for="tag in dynamicTags"
              closable
              :disable-transitions="false"
              @close="handleClose1(tag)">
              {{tag}}
              </el-tag>
              <el-input
              class="input-new-tag"
              v-if="inputVisible"
              v-model="form.label"
              ref="saveTagInput"
              size="small"
              @keyup.enter.native="handleInputConfirm"
              @blur="handleInputConfirm"
              >
              </el-input>
              <el-button v-else class="button-new-tag" size="small" @click="showInput">添加标签</el-button>
          </el-form-item>
           <el-form-item label="量表类型" prop="status1">
                <el-select v-model="form.status1" placeholder="请选择所属量表类型"  style="width: 300px;">
                    <el-option
                    v-for="item in staOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select> 
            </el-form-item>
      <el-row>
        <el-col :span="12">
            <el-form-item label="正常解释" v-if="typeShow">
                <el-input v-model="form.normalExplain"  style="width: 300px;" type="textarea"></el-input>
            </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="正常建议" v-if="typeShow">
                <el-input v-model="form.normalProposal"  style="width: 300px;" type="textarea"></el-input>
            </el-form-item>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="12">
            <el-form-item label="异常解释" v-if="typeShow">
                <el-input v-model="form.abnormalExplain" style="width: 300px;" type="textarea"></el-input>
            </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="异常建议" v-if="typeShow">
                <el-input v-model="form.abnormalProposal"  style="width: 300px;" type="textarea"></el-input>
            </el-form-item>
        </el-col>
    </el-row>
    
   

  <el-form-item label="区间："  v-if="!typeShow">
    <el-radio-group
      v-model="form.descList"
      ref="select"
      style="width:100%"
    >
      <div v-for="item in number" :key="item.index" >
        <el-row :gutter="20" >
          <el-col :span="14" style="margin-bottom: 20px;">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2 }"
              placeholder="请输入结果"
              v-model="item.describes"
            >
            </el-input>
          </el-col>
          <el-col :span="14" style="margin-bottom: 20px;">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2 }"
              placeholder="请输入解释"
              v-model="item.interpretation"
            >
            </el-input>
          </el-col>
          <el-col :span="14">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2 }"
              placeholder="请输入建议"
              v-model="item.suggestion"
            >
            </el-input>
          </el-col>
          <el-col :span="5">
            <el-input
              placeholder="请输入分数"
              v-model="item.score"
            >
            </el-input>
          </el-col>
        </el-row>
      </div>
    </el-radio-group>
    <el-form-item >
      <el-button
      type="primary"
      size="small"
      icon="el-icon-circle-plus-outline"
      @click="addSelect"
      >添加区间</el-button>
    </el-form-item>
    
  </el-form-item>
</el-form>
  <span slot="footer" class="dialog-footer" v-if="showBtn">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="onSubmit" v-if="!show">确 定</el-button>
    <el-button type="primary" @click="update" v-else>修 改</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
import { getList1,getAdd1,getUpdate1,getDetails1,getFactorList, getTabDet, editUnOrUp} from "@/api/table/table";
import { getClassifiedList } from "@/api/classified/classified";
import { getToken } from "@/utils/auth";

export default {
  name: '',
  data () {
    return {
        tableData: [],
        options:[],
        options1:[],
        value3:[],
        dynamicTags:[],
        labelPosition: 'right',
        dialogVisible:false,
        title:'',
        form:{
            name:'',
            numberPeople:undefined,
            // subjectNumber:undefined,
            actualPrice:undefined,
            referencePrice:undefined,
            examTime:undefined,
            factorStatus:'',
            normalScore:undefined,
            normalExplain:'',
            normalProposal:'',
            abnormalExplain:'',
            abnormalProposal:'',
            content:'',
            categoryId:undefined,
            logo:'',
            picUrl:'',
            label:'',
            recommended:'',
            descList:[],
            type:undefined,
            illustrate:'',
        },
        show:false,
        showBtn:true,
        inputVisible: false,
        params: {
            pageNum: 1,
            pageSize: 10,
        },
        paramsFlag: 0,
        newsTotal:0,
        headers: { Authorization: "Bearer " + getToken() },
        upImage: process.env.VUE_APP_BASE_API,
        //测量因子
        rules: {
            logo: [
          { required: true, message: "大图不能为空", trigger: "blur" }
        ],
        picUrl: [
          { required: true, message: "分类图不能为空", trigger: "blur" }
        ],
          name: [
            { required: true, message: '请输入测量表名称', trigger: 'blur' },
            // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          categoryId: [
            { required: true, message: '请选择分类', trigger: 'change' }
          ],
          status1:[
            { required: true, message: '请选择量表类型', trigger: 'change' }
          ],
          actualPrice: [
            { required: true, message: '请填写实际价格', trigger: 'blur',},
            {
              pattern:  /^(0|[1-9][0-9]*)(\.\d{1,2})?$/,
              message: "只能输入数字,小数点保留两位",
            }
          ],
          sort: [
            { required: true, message: '请填写排序值', trigger: 'blur' },
            { type: 'number', message: '排序时间必须为数字值', trigger: 'blur'}
          ],
          referencePrice:[
            { required: true, message: '请填写参考价格', trigger: 'blur' ,},
            {
              pattern:  /^(0|[1-9][0-9]*)(\.\d{1,2})?$/,
              message: "只能输入数字,小数点保留两位",
            }
          ],
          examTime:[
            { required: true, message: '请填写考试时间（分钟）', trigger: 'blur' },
            { type: 'number', message: '考试时间必须为数字值', trigger: 'blur'}
          ],
          factorStatus:[
            { required: true, message: '请选择有无测量因子', trigger: 'change' }
          ],
          normalScore:[
            { required: true, message: '请填写正常分数', trigger: 'blur' },
            { type: 'number', message: '正常分数必须为数字值'}
          ],
          normalExplain: [
            { required: true, message: '请填写正常解释', trigger: 'blur' }
          ],
          normalProposal: [
            { required: true, message: '请填写正常建议', trigger: 'blur' }
          ],
          abnormalExplain: [
            { required: true, message: '请填写异常解释', trigger: 'blur' }
          ],
          abnormalProposal: [
            { required: true, message: '请填写异常建议', trigger: 'blur' }
          ],
          content:[
            { required: true, message: '请填写介绍', trigger: 'blur' }
          ],
        },
        typeShow:false,
        options2:[{
          value: 0,
          label: '否'
        }, {
          value: 1,
          label: '是'
        }],
        number: [
        {
          index: 0,
          suggestion: "",
          score:''
        },
        {
          index: 1,
          suggestion: "",
          score:'',
        },
        {
          index: 2,
          suggestion: "",
          score:'',
        },
        {
          index: 3,
          suggestion: "",
          score:'',
        },
        {
          index: 4,
          suggestion: "",
          score:'',
        },
      ],
      staOptions:[
        {
          value: 1,
          label: '有解释、因子分、均分、参考'
        },
        {
          value: 2,
          label: '有解释,有图示'
        },
        {
          value: 3,
          label: '有解释,有总评'
        },
        {
          value: 4,
          label: '有解释,有因子分'
        },
        {
          value: 5,
          label: '有解释、满分、因子分',
        }, {
          value: 6,
          label: '有解释、有总评、总体评价、图示',
        },{
          value: 7,
          label: '无解释,有因子分',
        },
        {
          value: 8,
          label: '无解释,有因子分、评定结果',
        },
        {
          value: 9,
          label: '无解释,无表格、有总体评价',
        },{
          value: 10,
          label: '无解释,有总评、评定结果、图示',
        },{
          value: 11,
          label: '无解释,有因子分、满分',
        },
        {
          value: 12,
          label: '有结果,有因子分、总体评价',
        },
         {
          value: 13,
          label: '有解释,有因子分、总体评价',
        },{
          value: 14,
          label: '有解释,无表格、有总体评价',
        },{
          value: 15,
          label: '有解释,有总评、有图示',
        },
        {
          value: 16,
          label: '趣味测评',
        },
      ],
    }
  },
  props: [],
  components: {},
  computed: {},
  filters: {},
  methods: {
     addSelect() {
      let i = this.number.length;
      this.number.push({
        index: i,
        suggestion: "",
        score:'',
      });
    },
    changeType(val){
      console.log(val);
      if(val == '0'){
        this.typeShow = true
      }else{
        this.typeShow = false
        this.number= [
        {
          index: 0,
          suggestion: "",
          score:''
        },
        {
          index: 1,
          suggestion: "",
          score:'',
        },
        {
          index: 2,
          suggestion: "",
          score:'',
        },
        {
          index: 3,
          suggestion: "",
          score:'',
        },
        {
          index: 4,
          suggestion: "",
          score:'',
        },
      ]
      }
    },
    // 删除按钮
    handleDeleteClick(row){
      const id = row.id ;
      // console.log(id)
      this.$confirm("是否确认删除?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(function() {
          return getTabDet(id);
        })
        .then(() => {
          this.getTableList();
          this.$message.success('删除成功')
        })
        .catch(function() {});
    },
    handleUnOrUp(row,value){
      this.$confirm(`是否继续${value == 0 ? '下架' : '上架'}操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(function() {
          return editUnOrUp({
            id: row.id,
            state: value,
          });
        })
        .then(() => {
          this.getTableList();
          this.$message.success(value == 0? '下架成功' : '上架成功')
        })
        .catch(function() {});
    },
      // 触发搜索按钮
    search() {
      this.$set(this.params, "pageNum", 1);
      console.log(this.params);
      this.paramsFlag = 0;
      this.getTableList();
    },
      handleClose1(tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
        
      },
      showInput() {
           if(this.dynamicTags.length >= 3){
            this.$message.error('最多可添加三个标签');
            // console.log(123);
        }else{
             this.inputVisible = true;
             this.form.label = ''
                this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
                });
        }
      },
      handleInputConfirm() {
        let inputValue = this.form.label;
        if (inputValue) {
          this.dynamicTags.push(inputValue);
        }
        this.inputVisible = false;
        this.form.label = '';
      },
    //   查看
      chakan(row){
          this.title = '查看'
          this.showBtn = false
          getDetails1(row.id).then(res=>{
            if(res.code == 200){
                // console.log(res);
          this.form = JSON.parse(JSON.stringify(res.data))
           if(this.form.type == 0){
              this.typeShow = true
            }else{
              this.typeShow = false
            }
          this.dynamicTags = res.data.label.split(',')
          this.number = this.form.descList;  
        // this.form.factorsId = res.data.factorsId.split(',')
        // this.changeSelect(row)
            }
        })
       
        this.dialogVisible = true
      },
      handleAvatarSuccess(res, file) {
      this.form.logo ='https://9001rzsxy.oss-cn-beijing.aliyuncs.com'+ res.data
        if(res.code ==200){
         this.$message.success("上传成功");
        }
    },
     handleAvatarSuccess1(res, file) {
      this.form.picUrl ='https://9001rzsxy.oss-cn-beijing.aliyuncs.com'+ res.data
        if(res.code ==200){
         this.$message.success("上传成功");
        }
    },
       //   修改操作
    update(){
    //    this.form.factorsId= this.form.factorsId.toString()
            this.form.label = this.dynamicTags.join(',');
            if(this.form.type == 1){
              console.log(this.form,this.number)
              // this.form.descList = this.number
               var data = [];
              this.number.forEach((item,index) => {
                if(item.suggestion !== ''){
                  data.push(item)
                }
              })
              this.form.descList = data;
            }
            // console.log(this.form);
        this.$refs["form"].validate(valid => {
          if (valid) {
            getUpdate1(this.form).then(res => {
            if(res.code == 200){
                // console.log(res);
                this.$message.success("修改成功");
                this.dialogVisible = false
                this.getTableList()
            }
        })
          }
      });
          
    },
    handleUpdateClick(row){
        console.log(this.form.descList);
        this.show = true
        this.showBtn = true
        this.title = '修改'
        getDetails1(row.id).then(res=>{
            if(res.code == 200){
                // console.log(res);
        this.form = JSON.parse(JSON.stringify(res.data))
        // this.form.factorsId = res.data.factorsId.split(',')
        this.dynamicTags = res.data.label.split(',')
        this.number = this.form.descList;  
        if(this.form.type == 0){
          this.typeShow = true
        }else{
          this.typeShow = false
        }
        // this.changeSelect(row)
            }
        })
        this.dialogVisible = true
      
    },
       // 新增操作
    onSubmit(){
        console.log(this.form);
         var data = [];
          this.number.forEach((item,index) => {
            if(item.suggestion !== ''){
              data.push(item)
            }
          })
          this.form.descList = data;
        if(this.form.factorStatus == 1){
          console.log(123);
        this.$refs["form"].validate(valid => {
          if (valid) {
             getAdd1(this.form).then(res => {
                if(res.code == 200){
                    // console.log(res);
                    this.dialogVisible = false
                    this.$message.success("新增成功");
                    this.form = {}
                    this.getTableList()
                }
            });
          }
      });
        }else {
          console.log(456);
            this.form.label = this.dynamicTags.join(',');
        this.$refs["form"].validate(valid => {
          if (valid) {
                getAdd1(this.form).then(res => {
                    if(res.code == 200){
                        this.dialogVisible = false
                        this.$message.success("新增成功");
                        this.form = {}
                        this.getTableList()
                    }
                });
            }
        });
        }
        
    },
    //   添加按钮
    add(){
        this.title = '添加'
        this.dynamicTags = []
        this.form = {
            logo:'',
            picUrl:'',
            label:'',
            recommended:0
        }
        this.number=[
        {
          index: 0,
          suggestion: "",
          score:''
        },
        {
          index: 1,
          suggestion: "",
          score:'',
        },
        {
          index: 2,
          suggestion: "",
          score:'',
        },
        {
          index: 3,
          suggestion: "",
          score:'',
        },
        {
          index: 4,
          suggestion: "",
          score:'',
        },
      ],
        this.dialogVisible = true
        this.show = false
        this.showBtn = true
    },
      //   分类获取所有
    getClassList() {
        getClassifiedList().then(res => {
            if(res.code == 200){
                // console.log(res);
                this.options = res.rows
            }
        });
    },
    //   获取测量因子
      getFactorList() {
        getFactorList().then(res => {
            if(res.code == 200){
                this.form.factorId = res.rows
                this.options1 = res.rows
                // console.log(this.form.factorId);
            }
        });
    },
      //   获取所有
      getTableList() {
        getList1(this.params).then(res => {
            if(res.code == 200){
                // console.log(res);
                this.tableData = res.rows
                this.newsTotal = res.total
                // console.log(this.tableData);
                for (let i = 0; i < this.tableData.length; i++) {
                    if(this.tableData[i].label == null){
                        this.tableData[i].label = '无'
                    }
                   for (let j = 0; j < this.options.length; j++) {
                       if(this.tableData[i].categoryId == this.options[j].id){
                        //    console.log(this.options[j].name);
                           this.tableData[i]['categoryName'] = this.options[j].name
                       }
                   }
                }
            }
        });
    },
    handleClose(){
        this.dialogVisible = false
    },
  },
  created () {
      this.getClassList()
      this.getTableList()
      this.getFactorList()
  },
  mounted () {}
}
</script>

<style rel="stylesheet/scss" lang="scss">
.el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
  .table{
    padding-bottom: 20px;
  }
.box{
    margin: 10px;
    .btn{
        display: flex;
        // align-content: center;
        margin-top: 20px;
    }
}
.el-tooltip__popper {
  max-width: 60% !important;
}
.el-tooltip__popper,
.el-tooltip__popper.is-dark {
  max-width: 50% !important;
  line-height: 24px;
  color: #fff !important;
  background-color: rgb(48, 65, 86) !important;
}
.avatar-uploader .el-upload {
  width: 148px;
  height: 148px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
  border: 1px dashed #ccc;
}

.avatar {
  width: 148px;
  height: 148px;
  display: block;
}
.el-textarea__inner{
    height: 80px !important;
}
  .select {
  // display: block;
  margin-bottom: 10px;
  // vertical-align: middle;
}
 .el-row {
    margin-bottom: 20px !important;
    &:last-child {
      margin-bottom: 0 ;
    }
  }
</style>